<template>
  <div class="fullscreen-container">
    <!-- 轻量级背景 -->
    <div class="sci-fi-bg"></div>
    
    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 顶部标题 -->
      <div class="header header-modern">
        <div class="header-modern-inner">
          <div class="header-modern-logo">
            <i class="iconfont icon-qiyeduan1"></i>
          </div>
          <div class="header-modern-titles">
            <div class="header-modern-title">智慧园区</div>
            <div class="header-modern-subtitle"><span>未来科技·智能生活</span></div>
          </div>
        </div>
        <div class="header-modern-glow"></div>
      </div>
      
      <!-- 分割线 -->
      <div class="divider"></div>

      <!-- 滑动展示栏 -->
       <div class="body-content">
         <div class="carousel">
           <button class="carousel-arrow left" @click="prevSlide">‹</button>
           <div class="carousel-track">
             <div class="carousel-slide active">
               <div class="notice-flex">
                 <!-- 左侧文字 -->
                 <div class="notice-left">
                   <div class="notice-title-main">{{ notices[currentSlide].title }}</div>
                   <div class="notice-tagline">
                     <span class="notice-tag" :style="{ background: notices[currentSlide].tagColor }">{{ notices[currentSlide].tag }}</span>
                     <span class="notice-desc">{{ notices[currentSlide].desc }}</span>
                   </div>
                 </div>
                 <!-- 竖线 -->
                 <!-- <div class="notice-divider"></div> -->
                 <!-- 右侧iconfont图标 -->
                 <div class="notice-right">
                   <i :class="['iconfont', notices[currentSlide].icon, 'notice-icon']"></i>
                 </div>
               </div>
             </div>
           </div>
           <button class="carousel-arrow right" @click="nextSlide">›</button>

           <div class="carousel-dots">
             <span
               v-for="(n, idx) in notices"
               :key="idx"
               :class="['dot', { active: idx === currentSlide }]"
               @click="goTo(idx)"
             ></span>
           </div>
         </div>
       </div>

       <!-- 分割线 -->
      <div class="divider" />

       <!-- 路由跳转界面 -->
       <div class="router-content">
         <div class="modules-grid">
           <div
             class="module"
             v-for="(m, i) in modules"
             :key="i"
             @click="goToModule(i)"
             role="button"
             tabindex="0"
           >
             <div class="module-content">
               <i :class="['iconfont', m.icon, 'module-icon']"></i>
               <h3 class="module-title">{{ m.title }}</h3>
             </div>
           </div>
         </div>
       </div>
      
    </div>
    
    <!-- 登录对话框 -->
    <el-dialog 
    v-model="loginDialogVisible" 
    :title="loginDialogTitle" 
    width="400px"
  >
    <el-form :model="loginForm" label-width="80px">
      <el-form-item label="用户名">
        <el-input v-model="loginForm.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="loginDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleLogin">登录</el-button>
    </template>
  </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ROLE_REDIRECTS } from '@/constants/roles'
import '@/assets/iconfont/iconfont.css'

const router = useRouter()

// 登录对话框状态
const loginDialogVisible = ref(false)
const loginDialogTitle = ref('')
const loginForm = ref({
  username: '',
  password: ''
})

// 实际项目中替换为真实的API调用
const handleLogin = async () => {
  if (!loginForm.value.username || !loginForm.value.password) {
    ElMessage.warning('请输入用户名和密码')
    return
  }

  try {
    // 这里替换为实际的API调用
    // const response = await loginApi(loginForm.value)
    
    // 模拟API响应
    const mockRole = loginForm.value.username.includes('admin') ? 'admin' : 
                     loginForm.value.username.includes('client') ? 'client':'client'
    
    const response = {
      success: true,
      data: {
        username: loginForm.value.username,
        role: mockRole,
        token: 'mock-token-' + Math.random().toString(36).substring(2)
      }
    }

    if (response.success) {
      ElMessage.success('登录成功')
      loginDialogVisible.value = false
      
      // 存储用户信息
      localStorage.setItem('user', JSON.stringify(response.data))
      
      // 根据角色跳转
      const redirectPath = ROLE_REDIRECTS[response.data.role] || ROLE_REDIRECTS.default
      window.open(redirectPath, '_blank')  // 新窗口打开
    }
  } catch (error) {
    console.error('登录错误:', error)
    ElMessage.error(error.response?.data?.message || '登录失败')
  }
}

// 暴露方法供父组件调用
defineExpose({
  showLogin: () => loginDialogVisible.value = true
})

// 入园须知数据
const notices = ref([
  {
    title: '园区安全须知',
    desc: '请遵守园区安全规定，禁止携带危险物品进入园区。',
    tag: '重要',
    tagColor: '#f56c6c',
    icon: 'icon-anquan'
  },
  {
    title: '停车管理规定',
    desc: '园区内停车请按照指定区域停放，违者将受到处罚。',
    tag: '公告',
    tagColor: '#409eff',
    icon: 'icon-gonggao'
  },
  {
    title: '访客登记流程',
    desc: '所有访客需在前台进行登记，领取访客卡后方可进入。',
    tag: '流程',
    tagColor: '#67c23a',
    icon: 'icon-liucheng'
  }
])

// 轮播逻辑
const currentSlide = ref(0)
let carouselTimer = null

const nextSlide = () => {
  currentSlide.value = (currentSlide.value + 1) % notices.value.length
}

const prevSlide = () => {
  currentSlide.value = (currentSlide.value - 1 + notices.value.length) % notices.value.length
}

const goTo = (idx) => {
  currentSlide.value = idx
}

onMounted(() => {
  carouselTimer = setInterval(() => {
    nextSlide()
  }, 4000)
})

onUnmounted(() => {
  if (carouselTimer) clearInterval(carouselTimer)
})

// 模块配置（点击跳转）
const modules = ref([
  { title: '招商企业端登录/注册', icon: 'icon-qiyeduan'},
  { title: '招商管理端登录/注册', icon: 'icon-guanliduan'},
  { title: '园区数字大屏', icon: 'icon-shuzidaping'},
  { title: '智能AI助手', icon: 'icon-aiduihua'},
  { title: '物业模块', icon: 'icon-wuyeguanli'},
  { title: '办公模块', icon: 'icon-bangong'}
])
const activeModule = ref(-1)

// 显示客户端登录
const showClientLogin = () => {
  loginDialogTitle.value = '企业客户端登录'
  loginDialogVisible.value = true
}

// 显示管理端登录
const showAdminLogin = () => {
  loginDialogTitle.value = '园区管理端登录'
  loginDialogVisible.value = true
}



// <!-- 进入数字大屏 -->
const goToDashboard = () => {
  window.open('http://8.134.174.117:8080/#/home/Overview', '_blank')
}

// <!-- 打开AI聊天 -->
const openAIChat = () => {
  router.push('/deepseek')
}

// 物业模块跳转
const goToProperty = () => {
  window.open('http://8.134.174.117:8082', '_blank')
}

// 信息化办公模块跳转
const goToDigitalOffice = () => {
  window.open('http://8.134.174.117:8086/', '_blank')
}

// 路由跳转函数
const goToModule = (idx) => {
  if(idx === 0) {
    showClientLogin()
  } else if (idx === 1) {
    showAdminLogin()
  } else if(idx === 2){
    goToDashboard()
  } else if(idx ===3){
    openAIChat()
  } else if(idx === 4){
    goToProperty()
  } else {
    goToDigitalOffice()
  }
}
</script>

<style scoped>
/* 全屏容器 */
.fullscreen-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  color: #fff;
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
}

/* 主内容区 */
.main-content {
  min-height: 100%;
  padding: 20px 0px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  /* 主背景颜色保持微透明，body-content 会覆盖主要视觉区域 */
  background-color: rgba(2, 48, 88, 0.95);
  justify-content: center;
}



.header {
  text-align: center;
  margin-bottom: 10px;
  flex-shrink: 0;
  height: 10vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;  
  
}

.header-modern {
  width: 100%;
  min-height: 90px;
  background: linear-gradient(90deg, #23243a 0%, #2e5c8a 100%);
  border-radius: 0 0 32px 32px;
  box-shadow: 0 6px 32px 0 rgba(30,60,120,0.10);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  padding-bottom: 8px;
}
.header-modern-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 18px 32px 0 32px;
  position: relative;
  z-index: 2;
}
.header-modern-logo {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #ffd666 40%, #4fc3f7 100%);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 28px;
  box-shadow: 0 2px 12px #26315933;
}
.header-modern-logo .iconfont {
  font-size: 2.5rem;
  color: #fff;
  filter: drop-shadow(0 2px 8px #26315988);
}
.header-modern-titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.header-modern-title {
  font-size: 2.3rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 2px;
  margin-bottom: 8px;
  text-shadow: 0 2px 8px #26315944;
}
.header-modern-subtitle span {
  display: inline-block;
  background: linear-gradient(90deg, #4fc3f7 0%, #ffd666 100%);
  color: #23243a;
  font-size: 1.08rem;
  font-weight: 600;
  border-radius: 8px;
  padding: 4px 18px;
  box-shadow: 0 1px 6px #26315922;
  letter-spacing: 1px;
}
.header-modern-glow {
  width: 60%;
  height: 6px;
  margin: 18px auto 0 auto;
  background: radial-gradient(ellipse at center, #ffd666 0%, #4fc3f7 60%, transparent 100%);
  border-radius: 3px;
  opacity: 0.7;
  filter: blur(1.5px);
}

.divider {
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  
}

.body-content {
  display: flex;
  flex: 1; /* 占满 header 之外的可用空间 */
  min-height: 48vh;
  background: linear-gradient(180deg, rgba(0,140,200,0.18), rgba(0,180,255,0.12));
  padding: 24px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  /* max-width: 1280px; */
}

/* 轮播样式 */
.carousel {
  width: 100%;
  max-width: 1100px;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-track {
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 48vh;

}

.carousel-slide {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0.98);
  transition: all 400ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-slide.active {
  opacity: 1;
  transform: scale(1);
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: rgba(0,0,0,0.35);
  border: none;
  color: #fff;
  font-size: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.carousel-arrow.left { 
  left: 12px;
  transform: translateX(-100%);
}
.carousel-arrow.right {
   right: 12px;
  transform: translateX(100%);
}

.carousel-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  top: 99%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 6;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
}

.dot.active { background: #ffd666 }


@media (min-width: 1280px) {
  .router-content {
    display: flex;
    border-radius: 8px;
    padding: 30px;
    margin: 5%;
  }
}

/* router-content 背景要比 header 的蓝色更深 */
.router-content {
  /* 背景比 header 深，固定最大宽度并居中 */
  background: linear-gradient(120deg, #1a2238 60%, #263159 100%);
  border: 2.5px solid #2e5c8a;
  padding: 32px 18px 24px 18px;
  margin: 32px auto 20px auto;
  border-radius: 18px;
  min-height: 18vh;
  width: 100%;
  max-width: 1280px;
  box-shadow: 0 4px 32px 0 rgba(30,60,120,0.10);
}



/* 模块网格布局 - 确保4个模块都能显示 */
.modules-grid {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  align-items: stretch;
  gap: 16px;
}
.module {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

/* 模块通用样式 */
.module {
  background: linear-gradient(135deg, #1e2a4a 60%, #2e3c5c 100%);
  border: 1.5px solid #2e5c8a;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(.4,1.4,.6,1), box-shadow 0.28s, border-color 0.18s;
  box-shadow: 0 2px 8px 0 rgba(30,60,120,0.10);
  will-change: transform;
}
.module:hover, .module:active {
  transform: translateY(-16px) scale(1.04);
  box-shadow: 0 8px 32px 0 rgba(30,60,120,0.18);
  border-color: #4fc3f7;
  background: linear-gradient(135deg, #2e3c5c 60%, #3a5fa8 100%);
}

.module-content {
  padding: 18px 0 10px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none;
}

.module-icon {
  font-size: 2.8rem;
  margin-bottom: 12px;
  color: #4fc3f7;
  transition: color 0.18s;
}
.module:hover .module-icon, .module:active .module-icon {
  color: #ffd666;
}

.module-title {
  margin: 0 0 15px;
  font-size: 1.2rem;
  color: #fff;
  text-align: center;
}

/* 入园须知模块 */
.notice-container {
  width: 100%;
  flex: 1;
  min-height: 0;
}

.notice-scroll {
  padding: 5px;
  height: 100%;
}

.notice-item {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.notice-item:last-child {
  border-bottom: none;
}

.notice-title {
  font-weight: bold;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  font-size: 0.9rem;
}

.notice-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
  margin-right: 6px;
  color: white;
  margin-top: 5px;
}

.notice-desc {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 5px;
}

/* 轮播内容左右分栏布局 */
.notice-flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 220px;
  padding: 0 32px;
}
.notice-left {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}
.notice-title-main {
  font-size: 4.1rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 25px;
  line-height: 1.2;
  letter-spacing: 1px;
}
.notice-tagline {
  display: flex;
  align-items: center;
  gap: 18px;
}
.notice-tag {
  display: inline-block;
  padding: 4px 16px;
  border-radius: 16px;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  margin-right: 8px;
}
.notice-desc {
  font-size: 1.08rem;
  color: #e0e6f6;
  opacity: 0.92;
}
.notice-divider {
  width: 2px;
  height: 48vh;
  background: linear-gradient(180deg, #4fc3f7 0%, #263159 100%);
  margin: 0 36px;
  border-radius: 2px;
}
.notice-right {
  flex: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.notice-icon {
  font-size: 9.2rem;
  /* color: #4fb9f7; */
  color: #4fe3f7;
  filter: drop-shadow(0 2px 12px #26315988);
  transition: color 0.2s;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .modules-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, auto);
  }
  
  .title {
    font-size: 2rem;
  }
  
  .module {
    min-height: 200px;
  }
}

@media (max-width: 700px) {
  .header-modern-inner { flex-direction: column; align-items: center; padding: 12px 8px 0 8px; }
  .header-modern-logo { margin-right: 0; margin-bottom: 8px; }
  .header-modern-titles { align-items: center; }
  .header-modern-title { font-size: 1.3rem; }
  .header-modern-subtitle span { font-size: 0.92rem; padding: 3px 10px; }
  .header-modern { min-height: 60px; }
  .header-modern-glow { width: 90%; }
}
</style>